import { Form, Input, Button, Checkbox, message, Space } from 'antd';
import { useNavigate  } from "react-router-dom"
import api,{ ILogin } from "../../api";
import "./login.scss"
const Login = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const onFinish = (values: ILogin) => {
    api.login(values).then(({data}) => {
      if(data.status === 400){
        message.warning(data.msg);
        return;
      }
      window.sessionStorage.setItem('token',data.token);
    })
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const onReset = ()=>{
    form.resetFields();
  }
  return (
    <div className="login-form-wrapper">
      <h1>Login</h1>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 6}}
        wrapperCol={{ span: 12 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="on"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 6, span: 12 }}>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 12 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
            <Button htmlType="button" onClick={onReset}>
              Reset
            </Button>
          </Space>
        </Form.Item>
      </Form>
  </div>
  );
};
export default Login;